<template>
  <div class="project_bx" @click="fnc">
    <a :href="render_data_ref.link" target="_blank" rel="noopener noreferrer">
      <div class="bx_left">
        <!-- <img :src="render_data_ref.cover" alt="" /> -->
        <ImgLoader
          :src="render_data_ref.cover"
          placeholder="http://www.lv666.top/IMG/1630849399791_0.e88dtpu8jm.jpg"
          :transitionMs="ms"
        ></ImgLoader>
      </div>
      <div class="bx_right">
        <li class="title">{{ render_data_ref.title }}</li>
        <li class="info">
          <Icon icon="user"></Icon>
          <span> 作者 </span>
          <span>{{ render_data_ref.author }} </span>
          <Icon icon="time"></Icon>
          <span> 发表于 </span>
          <span> {{ render_data_ref.up_time }} </span>
          <Icon icon="daohang"></Icon>
          <span> 分类 </span>
          <span v-for="(item, i) in render_data_ref.classification" :key="i">
            &nbsp;{{ item }}</span
          >
          <Icon icon="look"></Icon>
          <span> 阅读量 </span>
          <span> {{ render_data_ref.reading }}</span>
        </li>
        <li class="Introduction">
          {{ render_data_ref.synopsis }}
        </li>
      </div>
    </a>
  </div>
</template>
<script>
import Icon from "../IconFont";
import "../../util/load_dom_project_bx";
import { ref } from "vue";
import ImgLoader from "../../components/ImageLoader";
import { Axios } from "../../axios";
export default {
  components: { Icon, ImgLoader },
  props: {
    obj: {
      type: Object,
    },
  },
  setup(prop) {
    let render_data_ref = ref(prop.obj);
    let ms = ref(500);
    let fnc = async () => {
      console.log(111111111111111111)
      await Axios({
        url: "/data/lookup",
        method: "post",
        data: {
          id: render_data_ref.value.id,
        },
      });
    };
    return {
      render_data_ref,
      ms,
      fnc,
    };
  },
};
</script>

<style lang="less">
@import url("../../assets/global/var.less");

.project_bx {
  width: 100%;
  min-width: 740px;
  overflow: hidden;
  .global_border_shadow();
  padding: 20px;
  cursor: pointer;
  margin-bottom: 20px;
  transition: all 0.5s;

  &:hover {
    border: 1px solid rgb(213, 245, 33);
    box-shadow: 0 1px 2px 0px rgb(213, 245, 33);
  }

  .icon {
    font-size: 14px;
    padding-left: 5px;
    vertical-align: middle;

    &:nth-of-type(2) {
      font-size: 12px;
    }
    &:nth-of-type(3) {
      font-size: 14px;
      vertical-align: top;
    }

    &:nth-of-type(4) {
      font-size: 17px;
    }
  }

  .bx_left {
    float: left;
    width: 20%;
    min-height: 100px;
    max-height: 140px;
    img {
      width: 100%;
    }
  }
  .bx_right {
    width: 75%;
    list-style: none;
    float: right;
  }
  .title {
    font-size: 26px;
    font-weight: 600;
    color: @title_color;
  }
  .info {
    font-size: 12px;
    color: @info_color;
    padding-top: 15px;
    padding-bottom: 20px;
  }
  .Introduction {
    font-size: 16px;
    color: @content_color;
    line-height: 2em;
    // .more_line_ellipsis();
  }
}
</style>